<template>
  <div>
  <div id="id1" >
<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: 'Welcome' }">主页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: 'Summary' }">汇总计划列表</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: 'Examine' }">待审核备货订单</el-breadcrumb-item>
</el-breadcrumb>
  </div>
  <div id="main1">
  <br>
  订单编号：
  <el-input placeholder="请输入" v-model="select.orderno" clearable style="height:40px;width:200px;"></el-input>
  订单日期：
  <el-date-picker
      v-model="select.sumdatefrom"
      type="datetime"
      placeholder="选择日期时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      default-time="12:00:00">
  </el-date-picker>
  至
  <el-date-picker
      v-model="select.sumdateto"
      type="datetime"
      placeholder="选择日期时间"
      value-format="yyyy-MM-dd HH:mm:ss"
      default-time="12:00:00">
  </el-date-picker>   
  制单人：
  <el-input placeholder="请输入" v-model="select.maker" clearable style="height:40px;width:200px;"></el-input>
   <el-button @click="load" type="info" icon="el-icon-search" plain style="float:right;">查询</el-button>
</div>

  <div id="id1"> 
    <el-button type="info" icon="el-icon-s-flag" plain @click="dialogVisible2 = true"><b>汇总计划</b></el-button>
    <el-button  type="info" icon="el-icon-position" plain ><b>导出</b></el-button>
  </div>

  <div id="main2">
    <div id="id">
    <el-table :data="summarys" border size="mini" :fit="true">
      <el-table-column type="selection"></el-table-column>
      <!-- 添加序号 -->
      <el-table-column prop="sno" label="序号" align="center" type="index"></el-table-column>
      <!-- 渲染后端数据 -->
      <el-table-column prop="sumdate" label="汇总计划制定日期" align="center"></el-table-column>
      <el-table-column prop="orderno" label="汇总计划订单编号" align="center"></el-table-column>
      <el-table-column prop="stocks[0].period" label="备货需求时间段" align="center"></el-table-column>
      <el-table-column prop="stocks[0].tnum" label="数量" align="center"></el-table-column>
      <el-table-column prop="stocks[0].tmoney" label="订单金额" align="center"></el-table-column>
      <el-table-column prop="stocks[0].tvolume" label="总体积（m³）" align="center"></el-table-column>
      <el-table-column prop="maker" label="制单人" align="center"></el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="detial(scope.row)">查看详情</el-button>
      </template>
    </el-table-column>
    </el-table>
    </div>

    <div id="id2">
    <div style="float:right;">小计：<span style="color:red">订单金额:{{totalPrice1}}元</span> 体积:{{totalVolume1}}m³</div>
    </div>
    <div id="id3">
      <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total=this.total>
    </el-pagination>
    </div>
   </div>

  <div id="id1">
    <div style="float:left;"><B>汇总信息</B></div>
    <div style="float:right;"><span style="color:red">订单金额:{{totalPrice2}}元 </span>体积:{{totalVolume2}}m³</div>
  </div>
  <div >
      <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="70%"
      >
        <el-descriptions class="margin-top"  :column="1" :size="size" border
        >
          <el-descriptions-item label="提交备货计划日期">
            {{this.summary.sumdate}}
          </el-descriptions-item>
          <el-descriptions-item label="计划时间段" v-if="this.summary.stocks">
            {{this.summary.stocks[0].period}}
          </el-descriptions-item>
          <el-descriptions-item label="区域" v-if="this.summary.stocks">
            {{this.summary.stocks[0].area}}
          </el-descriptions-item>
          <el-descriptions-item label="汇总计划单号" >
            {{this.summary.orderno}}
          </el-descriptions-item>
          <el-descriptions-item label="制单人">
            {{this.summary.maker}}
          </el-descriptions-item>
          <el-descriptions-item label="需求总数量" v-if="this.summary.stocks">
            {{this.summary.stocks[0].tnum}}
          </el-descriptions-item>
          <el-descriptions-item label="总体积" v-if="this.summary.stocks">
            {{this.summary.stocks[0].tvolume}}
          </el-descriptions-item>
          <el-descriptions-item label="总金额" v-if="this.summary.stocks">
            {{this.summary.stocks[0].tmoney}}
          </el-descriptions-item>
          
        </el-descriptions>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible2"
        width="70%"
        >
        <el-table :data="stocks" border size="mini" :fit="true">
          <el-table-column type="selection"></el-table-column>
          <!-- 添加序号 -->
          <el-table-column prop="sno" label="序号" align="center" type="index"></el-table-column>
          <!-- 渲染后端数据 -->
          <el-table-column prop="subDate" label="提交备货计划日期" align="center"></el-table-column>
          <el-table-column prop="orderno" label="备货计划订单编号" align="center"></el-table-column>
          <el-table-column prop="dno" label="经销商编码" align="center"></el-table-column>
          <el-table-column prop="dname" label="经销商名称" align="center"></el-table-column>
          <el-table-column prop="area" label="区域" align="center"></el-table-column>
          <el-table-column prop="pno" label="产品编码" align="center"></el-table-column>
          <el-table-column prop="pmodel" label="产品型号"  align="center"></el-table-column>
          <el-table-column prop="category" label="品类" align="center"></el-table-column>
          <el-table-column prop="tnum" label="总数量" align="center"></el-table-column>
          <el-table-column prop="singlePrice" label="开票价格" align="center"></el-table-column>
          <el-table-column prop="tmoney" label="总金额" align="center"></el-table-column>
          <el-table-column prop="tvolume" label="总体积（m³）" align="center"></el-table-column>
          <el-table-column prop="state" label="订单状态" align="center"></el-table-column>
          <el-table-column prop="is" label="是否已缴纳备货保证金" align="center"></el-table-column>
          <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="huizong(scope.row)">汇总</el-button>
            
          </template>
        </el-table-column>
        </el-table>
        <div  class="block">
          <el-pagination
          @current-change="handleCurrentChange2"
          :current-page="currentPage2"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total=this.total2>
        </el-pagination>
        </div>
      </el-dialog>
    </div>
    <div>
    <el-dialog
      title="汇总"
      :visible.sync="dialogVisible3"
      width="30%"
      >
      <span>是否通过汇总？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3=false">不通过</el-button>
        <el-button type="primary" @click="pass">通过</el-button>
      </span>
    </el-dialog>
  </div>
    </div>
  </div>
  
</template>


<script>
export default {
    name:"Summary",
    data(){
        return{
            dialogVisible:false,
            dialogVisible2:false,
            dialogVisible3:false,
            currentPage:1,
            currentPage2:1,
            pageSize:5,
            summary:{
            },
            size:1,
            stock:{},
            stocks:{},
            totalPrice1:0,
            totalPrice2:0,
            totalVolume1:0,
            totalVolume2:0,
            //返回后端的信息
            summarys:[],
            select:{},
            gettime: "",
            total:5,
            total2:5
        };
    },
    mounted(){
       this.load()
       this.tol()
       this.load2()
       this.currentTime();
    },
    
    methods:{
      load(){
        this.$Ajax.get("getAllSummaryInfo",{
          params:{
            page: this.currentPage,
            rows:this.pageSize,
            orderno:this.select.orderno,
            sumdatefrom:this.select.sumdatefrom,
            sumdateto:this.select.sumdateto,
            maker:this.select.maker
          }
        }).then(result=>{
          console.log(result);
          this.summarys=result.data.rows,
          this.total = result.data.total,
          this.totalPrice1 = 0
          this.totalVolume1 = 0
          this.summary.is=result.data.rows.needMoney-result.data.rows.alreadyMoney?"是":"否"
          console.log(this.summarys.stocks);
          this.summarys.forEach(summary =>{
            this.totalPrice1 = this.totalPrice1 + summary.stocks[0].tmoney
          })
          this.summarys.forEach(summary =>{
            this.totalVolume1 = this.totalVolume1 + summary.stocks[0].tvolume
          })
        })
      },
      load2(){
        this.$Ajax.get("getAllStockInfo",{
          params:{
            page: this.currentPage2,
            rows:this.pageSize,
            state:"未汇总",
          }
        }).then(result=>{
          console.log(result);
          this.stocks=result.data.rows,
          this.total2 = result.data.total
          
        })
      },
      tol(){
        this.$Ajax.get("getAllSummaryInfo",{
          params:{
            rows:1000,
            page:1
          }
        }).then(result=>{
          console.log(result);
          this.summarys2 = result.data.rows,
          this.summarys2.forEach(summary2 =>{
            this.totalPrice2 = this.totalPrice2 + summary2.stocks[0].tmoney
          })
          this.summarys2.forEach(summary2 =>{
            this.totalVolume2 = this.totalVolume2 + summary2.stocks[0].tvolume
          })
        })
      },
      huizong(row){
        this.stock = row
        let user = JSON.parse(sessionStorage.getItem("user"))
        this.summary.maker=user.userName,
        this.summary.orderno = row.orderno
        this.summary.sumno = row.orderno+1000
        this.summary.sumdate = this.gettime
        this.dialogVisible3 = true
      },
      pass(){
        this.$Ajax.post("huizongBysno",this.stock).then(result=>{
          this.$Ajax.post("insert",this.summary).then(result =>{
            if(result.data.flag == true){
            this.$message({
              type:"success",
               message:result.data.message
            })
          }else{
            this.$message({
              type:"error",
              message:result.data.message
            })
          }
          this.load()
          this.load2()
          this.tol()
          this.dialogVisible3 = false
          })
        })
      },
      detial(summary){
        this.summary = summary
        this.dialogVisible = true
        console.log(summary);
      },
      // 获取当前时间
      getTime() {
                var _this = this;
                  let yy = new Date().getFullYear();
                  var mm =
                    new Date().getMonth() > 9
                      ? new Date().getMonth() + 1
                      : new Date().getMonth() == 9
                      ? new Date().getMonth() + 1
                      : '0' + (new Date().getMonth() + 1);
                  var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
                  let hh = new Date().getHours();
                  let mf =
                    new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
                  let ss =
                    new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
                  _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
                },
                currentTime() {
                  setInterval(this.getTime, 1000);
                },

      handleCurrentChange(pagenum) {
        console.log(`当前页: ${pagenum}`);
        this.currentPage = pagenum
        this.load()
      },
      handleCurrentChange2(pagenum2) {
        console.log(`当前页: ${pagenum2}`);
        this.currentPage2 = pagenum2
        this.load2()
      },
    },

  
};
</script>

<style>
 #id1 {
    background-color: #B3C0D1;
    color: #333;
    text-align: left;  
    line-height: 40px;
    height: 45px;
  }
  
  #main1 {
    background-color:#f3f5f8;
    color: #333;
    text-align: left;
    line-height: 25px;
    height: 130px;
  }

  #main2{
    background-color:#D3DCE6;
    color: #333;
    text-align: center;
    height: 410px;
  }
  #id{
    background-color:#D3DCE6;
    color: #333;
    text-align: center;
    height: 360px;
  }
   #id2 {

    background-color: #f3f5f8;
    color: #333;
    font-size: 15px;
    text-align: right;;
    height: 20px;
  }
   #id3 {

    background-color: #E9EEF3;
    color: #333;
    text-align: right;;
    height: 30px;
  }
  /* 设置表格边框颜色 */
.el-table--border,
.el-table--group {
  border: 1px solid rgb(6, 6, 6) !important;
}

/* 设置表格内竖线颜色 */
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid black !important;
}

/* 设置表格内行线颜色 */
.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid black !important;
}

/* 设置表头边框颜色 */
.el-table thead tr th {
  border-color: rgb(153, 21, 173);
}

/* 设置鼠标悬停时的样式 */
.el-table tbody tr:hover > td {
  cursor: pointer;
  background-color: transparent !important;
}

/* 设置表头列与内容对齐样式 */
body .el-table th.gutter {
  display: table-cell !important;
}
</style>
